<template>
    <basic-container>
        <el-tabs type="border-card" v-model="currentTab" @tab-click="tabClick">
            <el-tab-pane label="待办任务" name="task">
                <avue-crud v-model="form" v-bind="bindVal" :page.sync="page" :highlight-current-row="true"
                    v-on="onEvent">
                    <template slot="menuLeft" slot-scope="{size}">
                        <el-button type="warning" :size="size" icon="el-icon-download">导入</el-button>
                        <el-button type="danger" :size="size" icon="el-icon-refresh-left" :loading="btnLoading"
                            @click="synchronization">同步
                        </el-button>
                    </template>
                    <template slot="menu" slot-scope="{size}">
                        <el-button type="text" :size="size" icon="el-icon-reading">办理</el-button>
                        <el-button type="text" :size="size" icon="el-icon-refresh-left">手动同步</el-button>
                    </template>
                </avue-crud>
            </el-tab-pane>
            <el-tab-pane label="待批事项" name="item">
                <avue-crud v-model="form" v-bind="bindVal" :page.sync="page" :highlight-current-row="true"
                    v-on="onEvent">
                    <template slot="menuLeft" slot-scope="{size}">
                        <el-button type="warning" :size="size" icon="el-icon-download">导入</el-button>
                        <el-button type="danger" :size="size" icon="el-icon-refresh-left" :loading="btnLoading"
                            @click="synchronization">同步</el-button>
                    </template>
                    <template slot="menu" slot-scope="{size}">
                        <el-button type="text" :size="size" icon="el-icon-reading">办理</el-button>
                        <el-button type="text" :size="size" icon="el-icon-refresh-left">手动同步</el-button>
                    </template>
                </avue-crud>
            </el-tab-pane>
        </el-tabs>
    </basic-container>
</template>

<script>
import { parseTime } from '@/utils/ruoyi'
export default {
    data() {
        return {
            data: [],
            loading: false,
            page: {},
            form: {},
            currentTab: 'task',
            btnLoading: false
        }
    },
    computed: {
        bindVal() {
            return {
                ref: 'crud',
                option: this.option,
                data: this.data,
                tableLoading: this.loading,
            }
        },
        onEvent() {
            return {
                'on-load': this.getList,
                'row-save': this.rowSave,
                'row-update': this.rowUpdate,
                'row-del': this.rowDel,
            }
        },
        currentName() {
            return this.currentTab == 'task' ? '待办任务' : '待办事项'
        },
        option() {
            return {
                stripe: true,
                headerAlign: 'left',
                align: 'left',
                border: true,
                defaultExpandAll: false,
                selection: true,
                tip: false,
                searchMenuSpan: 6,
                searchMenuPosition: 'left',
                size: 'mini',
                highlightCurrentRow: true,
                maxHeight: '600',
                addBtn: false,
                editBtn: false,
                delBtn: false,
                column: [
                    {
                        label: '序号',
                        prop: '$index'
                    },
                    {
                        label: '待办名称',
                        prop: 'name'
                    },
                    {
                        label: '发起时间',
                        prop: 'time',
                        type: 'date'
                    },
                    {
                        label: '发起人',
                        prop: 'person'
                    }
                ],
            }
        }
    },
    created() {
        this.page.currentPage = 1
        this.page.pageSize = 10
        this.page.total = 10
    },
    methods: {
        tabClick(e) {
            this.getList(this.currentName)
        },
        synchronization(name) {
            this.btnLoading = true

            setTimeout(() => {
                if (this.page.total <= 10) {
                    this.page.total += 2
                } else {
                    this.$message.warning('暂无同步数据')
                }
                this.btnLoading = false
            }, 1000)
        },
        getList(params) {
            if (this.page.currentPage == 1) {
                const length = 10
                const data = Array.from({ length }).map((item, index) => ({ name: this.currentName + index, time: parseTime(new Date(), '{y}-{m}-{d}'), person: '吴龙' }));
                this.data = data
            } else {
                const length = 2
                const data = Array.from({ length }).map((item, index) => ({ name: this.currentName + index, time: parseTime(new Date(), '{y}-{m}-{d}'), person: '张小娟' }));
                this.data = data
            }

        },
        sizeChange(val) {
            this.page.currentPage = 1
            this.page.pageSize = val
        },
        currentChange(val) {
            this.page.currentPage = val
        },
        rowSave(row, done, loading) {
            this.data.push(row)
            done()
        },
        rowUpdate(row, index, done, loading) {
            this.data[index] = row
            done()
        },
        rowDel(row, index, loading) {
            this.$confirm(`确定要操作此条数据吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.data.splice(index, 1)
            })
        }
    }
}
</script>

<style>

</style>